import Root from "../../components/Root";
import { Layout } from "antd";

import BaseForm from "../../components/BaseForm";
import LoginFields from "./LoginFields";

import { connect } from "dva";

const { Content, Footer } = Layout;
const captchaUrl = "api/admin/sys/login/captcha?";

const ACTION = "login/doLogin";

@connect(({ login, loading }) => ({
  ...login,
  loading: Root.getLoadStatus([ACTION], loading)
}))
export default class Login extends Root {
  constructor(props) {
    super(props);
    this.state = {
      captchaUrl
    };
  }

  getLoadConfig() {
    return [ACTION];
  }

  refreshCaptcha() {
    this.setState({
      captchaUrl: captchaUrl + Math.random()
    });
  }

  onSubmit(form) {
    form.validateFieldsAndScroll(null, {}, (err, values) => {
      if (!err) {
        this.props.dispatch({
          type: ACTION,
          payload: values,
          callBack: this.refreshCaptcha.bind(this)
        });
      }
    });
  }

  render() {
    return (
      <Layout style={{ width: "100%", height: "100%", alignItems: "center" }}>
        <Content
          style={{
            flex: 1,
            display: "flex",
            flexDirection: "column",
            width: "30%",
            justifyContent: "center"
          }}>
          <div style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            margin: "0 0 10% 0"
          }}>
            <span style={{ fontSize: 40, fontWeight: "bold", margin: "0 30px" }}>
              登陆测试系统
            </span>
          </div>
          <BaseForm
            isSubmit
            submitIcon="login"
            submitText="登录"
            fields={LoginFields({
              onFresh: this.refreshCaptcha.bind(this)
            })}
            onSubmit={this.onSubmit.bind(this)}
          />
        </Content>
        <Footer style={{ textAlign: "center" }}>
        </Footer>
      </Layout>
    );
  }
}
